<template>
  <div>
    <!-- 轮播图 -->
    <div class="banner">
      <div class="swiper">
        <swiper
          :options="swiperOption"
          @mouseover.native="stopPlay"
          @mouseout.native="startPlay"
          ref="swiper"
        >
          <swiper-slide>
            <img style="height: 450px; width: 100%" src="/index/banner1.jpg" />
          </swiper-slide>
          <swiper-slide>
            <img style="height: 450px; width: 100%" src="/index/banner2.jpg" />
          </swiper-slide>
          <swiper-slide>
            <img style="height: 450px; width: 100%" src="/index/banner3.jpg" />
          </swiper-slide>
          <!-- 页数指示器 -->
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <!-- 侧边 -->
      <div class="nav_left">
        <el-col style="height: 500px,width:250px" :span="12">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            text-color="#cc6633"
            active-text-color="#cc6633"
          >
            <el-menu-item index="1">
              <i style="font-size: 30px" class="iconfont">&#xe84d;</i>
              <span>&nbsp;&nbsp;&nbsp;欧洲</span>
            </el-menu-item>
            <el-menu-item index="2">
              <i style="font-size: 20px" class="iconfont">&#xe63a;</i>
              <span slot="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日本</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i style="font-size: 20px" class="iconfont">&#xe6e6;</i>
              <span slot="title">&nbsp;&nbsp;&nbsp;&nbsp;东南亚</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i style="font-size: 30px" class="iconfont">&#xe60a;</i>
              <span slot="title">&nbsp;&nbsp;&nbsp;美洲</span>
            </el-menu-item>
            <el-menu-item index="5">
              <i style="font-size: 30px" class="iconfont">&#xe634;</i>
              <span slot="title">大洋洲 中东非</span>
            </el-menu-item>
            <el-menu-item index="6">
              <i style="font-size: 30px" class="iconfont">&#xe603;</i>
              <span slot="title">&nbsp;&nbsp;&nbsp;国内游</span>
            </el-menu-item>
            <el-menu-item index="7">
              <i style="font-size: 20px" class="iconfont">&#xe604;</i>
              <span slot="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定制旅行</span>
            </el-menu-item>
            <el-menu-item index="8">
              <i style="font-size: 20px" class="iconfont">&#xe608;</i>
              <span slot="title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;其他</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </div>
      <!-- 主要内容-->
      <div class="main">
        <!-- 特惠栏目 -->
        <div class="main1">
          <div class="main1_top">
            <li>中秋国庆 阖家欢乐</li>
          </div>
          <!-- 产品 -->
          <div class="main1_m">
            <a class="li" @click="ljqg">
              <img src="/index/tuan1.jpg" alt="" />
              <div class="padd10">
                <p>
                  ＜八大安心承诺　一价全含　　俄罗斯金银环６晚８日＞疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服　为您提供服务
                </p>
                <b>
                  <em>￥</em>
                  600001
                  <em>起</em>
                </b>
                <span>立即抢购</span>
              </div>
            </a>
            <a class="li" href="" @click="ljqg">
              <img src="/index/tuan2.jpg" alt="" />
              <div class="padd10">
                <p>
                  ＜一家一团　旅居生活　跟着文学漫游　英国１０日＞疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服　为您提供服务
                </p>
                <b>
                  <em>￥</em>
                  600001
                  <em>起</em>
                </b>
                <span>立即抢购</span>
              </div>
            </a>
            <a class="li" href="" @click="ljqg">
              <img src="/index/tuan3.jpg" alt="" />
              <div class="padd10">
                <p>
                  ＜光辉岁月　俄罗斯金环三镇＋贝加尔湖大全景９晚１１日＞疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服　为您提供服务
                </p>
                <b>
                  <em>￥</em>
                  600001
                  <em>起</em>
                </b>
                <span>立即抢购</span>
              </div>
            </a>

            <a class="li" href="" @click="ljqg">
              <img src="/index/tuan4.jpg" alt="" />
              <div class="padd10">
                <p>
                  ＜八大安心承诺　一价全含　　俄罗斯金银环６晚８日＞疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服　为您提供服务
                </p>
                <b>
                  <em>￥</em>
                  600001
                  <em>起</em>
                </b>
                <span>立即抢购</span>
              </div>
            </a>
          </div>
          <div class="clear" style="clear: both"></div>
        </div>
        <!-- 第二层主要内容 -->
        <div class="main2">
          <div class="main2_top">
            <i class="iconfont icon-youbian"></i>
            <b>初秋微凉</b>
            <span>秋高气爽 出游正当时</span>
          </div>
          <div class="main2_m">
            <a class="main2_left" href=""></a>
            <div class="main2_right">
              <div class="main2_right_list">
                <a class="li" href="" @click="ljqg">
                  <img src="/index/qiu1.jpg" alt="" />
                  <p>
                    南美印象巴西+阿根廷+秘鲁+智利23日>疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服为您提供服务
                  </p>
                  <div class="price">
                    <em>￥</em>
                    400009
                    <em>起</em>
                  </div>
                  <div class="start">成都出发</div>
                </a>
                <a class="li" href="" @click="ljqg">
                  <img src="/index/qiu2.jpg" alt="" />
                  <p>
                    一价全含
                    西班牙葡萄牙12日>疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服
                    为您提供服务
                  </p>
                  <div class="price">
                    <em>￥</em>
                    400009
                    <em>起</em>
                  </div>
                  <div class="start">成都出发</div>
                </a>
                <a class="li" href="" @click="ljqg">
                  <img src="/index/qiu3.jpg" alt="" />
                  <p>
                    一价全含
                    英国爱尔兰15日>疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服
                    为您提供服务
                  </p>
                  <div class="price">
                    <em>￥</em>
                    400009
                    <em>起</em>
                  </div>
                  <div class="start">成都出发</div>
                </a>
                <a class="li" href="" @click="ljqg">
                  <img src="/index/qiu4.jpg" alt="" />
                  <p>
                    纵览德意志
                    德国15日>疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服
                    为您提供服务
                  </p>
                  <div class="price">
                    <em>￥</em>
                    400009
                    <em>起</em>
                  </div>
                  <div class="start">成都出发</div>
                </a>
                <a class="li" href="" @click="ljqg">
                  <img src="/index/qiu5.jpg" alt="" />
                  <p>
                    一价全含 *荣耀
                    德法瑞意14日>疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服
                    为您提供服务
                  </p>
                  <div class="price">
                    <em>￥</em>
                    400009
                    <em>起</em>
                  </div>
                  <div class="start">成都出发</div>
                </a>
                <a class="li" href="" @click="ljqg">
                  <img src="/index/qiu6.jpg" alt="" />
                  <p>
                    东欧十大保障 VIP小团
                    奥地利捷克12日>疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服
                    为您提供服务
                  </p>
                  <div class="price">
                    <em>￥</em>
                    400009
                    <em>起</em>
                  </div>
                  <div class="start">成都出发</div>
                </a>
                <div class="clear" style="clear: both"></div>
              </div>
            </div>
            <div class="clear" style="clear: both"></div>
          </div>
          <div class="clear" style="clear: both"></div>
        </div>
        <div style="margin-top: 20px" class="middle">
          <img src="/index/middle.jpg" alt="" />
        </div>
        <div class="main2">
          <div class="main2_top">
            <i class="iconfont icon-youbian"></i>
            <b>短线推荐</b>
            <span>短线目的地推荐：日本 台湾 东南亚 海岛</span>
          </div>
          <div class="main2_m">
            <a class="main2_left2" href=""></a>
            <div class="main2_right">
              <div class="main2_right_list">
                <a class="li" href="" @click="ljqg">
                  <img src="/index/duan1.jpg" alt="" />
                  <p>
                    和晴悦赏 本州私享
                    乐活日本6晚7日>疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服
                    为您提供服务
                  </p>
                  <div class="price">
                    <em>￥</em>
                    400009
                    <em>起</em>
                  </div>
                  <div class="start">成都出发</div>
                </a>
                <a class="li" href="" @click="ljqg">
                  <img src="/index/duan2.jpg" alt="" />
                  <p>
                    无自费悦墅星月PP版
                    泰国普吉7日>疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服
                    为您提供服务
                  </p>
                  <div class="price">
                    <em>￥</em>
                    400009
                    <em>起</em>
                  </div>
                  <div class="start">成都出发</div>
                </a>
                <a class="li" href="" @click="ljqg">
                  <img src="/index/duan3.jpg" alt="" />
                  <p>
                    湖景私汤
                    安心畅游台湾环岛8日>疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服
                    为您提供服务
                  </p>
                  <div class="price">
                    <em>￥</em>
                    400009
                    <em>起</em>
                  </div>
                  <div class="start">成都出发</div>
                </a>
                <a class="li" href="" @click="ljqg">
                  <img src="/index/duan4.jpg" alt="" />
                  <p>
                    非诚勿扰花幽香 北海道阿寒湖芝樱花海
                    乐活日本5晚6日>疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服
                    为您提供服务
                  </p>
                  <div class="price">
                    <em>￥</em>
                    400009
                    <em>起</em>
                  </div>
                  <div class="start">成都出发</div>
                </a>
                <a class="li" href="" @click="ljqg">
                  <img src="/index/duan5.jpg" alt="" />
                  <p>
                    品质安心
                    泰国普吉5晚7日>疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服
                    为您提供服务
                  </p>
                  <div class="price">
                    <em>￥</em>
                    400009
                    <em>起</em>
                  </div>
                  <div class="start">成都出发</div>
                </a>
                <a class="li" href="" @click="ljqg">
                  <img src="/index/duan6.jpg" alt="" />
                  <p>
                    一价全含 环岛双铁 台北1日自由行
                    台湾8日>疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服
                    为您提供服务
                  </p>
                  <div class="price">
                    <em>￥</em>
                    400009
                    <em>起</em>
                  </div>
                  <div class="start">成都出发</div>
                </a>
                <div class="clear" style="clear: both"></div>
              </div>
            </div>
            <div class="clear" style="clear: both"></div>
          </div>
          <div class="clear" style="clear: both"></div>
        </div>
        <div style="margin-top: 20px" class="middle">
          <img src="/index/middle2.jpg" alt="" />
        </div>
        <div class="main2">
          <div class="main2_top">
            <i class="iconfont icon-youbian"></i>
            <b>出境长线</b>
            <span>长线目的地推荐：欧洲 美洲 澳洲 非洲</span>
          </div>
          <div class="main2_m">
            <a class="main2_left3" href=""></a>
            <div class="main2_right">
              <div class="main2_right_list">
                <a class="li" href="" @click="ljqg">
                  <img src="/index/chang1.jpg" alt="" />
                  <p>
                    梦幻绿松石海岸 地中海费特希耶旖旎
                    土耳其12日>疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服
                    为您提供服务
                  </p>
                  <div class="price">
                    <em>￥</em>
                    400009
                    <em>起</em>
                  </div>
                  <div class="start">成都出发</div>
                </a>
                <a class="li" href="" @click="ljqg">
                  <img src="/index/chang2.jpg" alt="" />
                  <p>
                    全家总动员
                    瑞士一地12日>疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服
                    为您提供服务
                  </p>
                  <div class="price">
                    <em>￥</em>
                    400009
                    <em>起</em>
                  </div>
                  <div class="start">成都出发</div>
                </a>
                <a class="li" href="" @click="ljqg">
                  <img src="/index/chang3.jpg" alt="" />
                  <p>
                    一价全含巴尔干四国
                    塞尔维亚+黑山+波黑+阿尔巴尼亚12日>疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服
                    为您提供服务
                  </p>
                  <div class="price">
                    <em>￥</em>
                    400009
                    <em>起</em>
                  </div>
                  <div class="start">成都出发</div>
                </a>
                <a class="li" href="" @click="ljqg">
                  <img src="/index/chang4.jpg" alt="" />
                  <p>
                    沙海相约
                    轻奢埃及红海8日>疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服
                    为您提供服务
                  </p>
                  <div class="price">
                    <em>￥</em>
                    400009
                    <em>起</em>
                  </div>
                  <div class="start">成都出发</div>
                </a>
                <a class="li" href="" @click="ljqg">
                  <img src="/index/chang5.jpg" alt="" />
                  <p>
                    一价全含
                    荷兰+德法瑞意13日>疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服
                    为您提供服务
                  </p>
                  <div class="price">
                    <em>￥</em>
                    400009
                    <em>起</em>
                  </div>
                  <div class="start">成都出发</div>
                </a>
                <a class="li" href="" @click="ljqg">
                  <img src="/index/chang6.jpg" alt="" />
                  <p>
                    不一样的美东 深度纽约州 名城大瀑布
                    美国11日>疫情原因本产品暂无出团计划，如您对本产品感兴趣请联系在线咨询客服
                    为您提供服务
                  </p>
                  <div class="price">
                    <em>￥</em>
                    400009
                    <em>起</em>
                  </div>
                  <div class="start">成都出发</div>
                </a>
                <div class="clear" style="clear: both"></div>
              </div>
            </div>
            <div class="clear" style="clear: both"></div>
          </div>
          <div class="clear" style="clear: both"></div>
        </div>
      </div>
    </div>
    <div class="clear" style="clear: both"></div>
  </div>
</template>

<script>
import "swiper/css/swiper.min.css";
export default {
  data() {
    return {
      swiperOption: {
        // effect 特效
        effect: "fade",
        loop: true, //循环滚动

        autoplay: {
          // 用户操作swiper之后，是否禁止autoplay。默认为true：停止
          disableOnInteraction: false,
          //   自动切换的时间间隔，单位ms
          delay: 3000,
        },
      },
    };
  },
  // ping +
  methods: {
    ljqg() {
      if (this.$route.path == "/yuding") return;
      this.$router.push("/yuding");
    },
  },
};
</script>

<style lang="scss" scoped src="../assets/scss/IndexMain.scss"></style>
